<template>
  <div class="register">
    <div class="regbox">
      <div class="reg-title">
        <h2>补发变更/转让/续展证明申请</h2>
      </div>
      <div class="reg-form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="200px"
          class="demo-ruleForm"
        >
          <el-form-item label="申请人名称：" prop="applicant">
            <el-input v-model="ruleForm.applicant" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="商标注册号：" prop="regist_num">
            <el-input v-model="ruleForm.regist_num" placeholder="商标注册号"></el-input>
          </el-form-item>
          <el-form-item label="是否共有商标：" prop="is_share">
            <el-radio-group v-model="ruleForm.is_share">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="补发证明事项：">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="变更证明" name="type"></el-checkbox>
            </el-checkbox-group>
            <el-form-item label="变更前注册人名称（地址）：" class="input-sub" prop="before_regist_change">
              <el-input v-model="ruleForm.before_regist_change" placeholder="变更前注册人名义（地址）"></el-input>
            </el-form-item>
            <el-form-item label="变更后注册人名称（地址）：" class="input-sub" prop="after_regist_change">
              <el-input v-model="ruleForm.after_regist_change" placeholder="变更后注册人名称（地址）"></el-input>
            </el-form-item>

            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="转让证明" name="type"></el-checkbox>
            </el-checkbox-group>
            <el-form-item label="转让人名称：" class="input-sub" prop="transferees_name">
              <el-input v-model="ruleForm.transferees_name" placeholder="转让人名称"></el-input>
            </el-form-item>
            <el-form-item label="受让人名称：" class="input-sub" prop="transferor_name">
              <el-input v-model="ruleForm.transferor_name" placeholder="受让人名称"></el-input>
            </el-form-item>

            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="续展证明" name="type"></el-checkbox>
            </el-checkbox-group>
            <el-form-item label="商标续展注册有效期：" class="input-sub" prop="regist_validity">
              <el-input v-model="ruleForm.regist_validity" placeholder="商标续展注册有效期"></el-input>
            </el-form-item>
          </el-form-item>
          <base-upload @getFile="getFile"></base-upload>
        </el-form>
      </div>
      <div class="r-f-sutbox">
        <button class="r-f-sut" @click="subForm('ruleForm')">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import BaseUpload from "@/components/base-component/BaseUpload";
export default {
  name: "form-reissuetransfer",
  components: {
    BaseUpload
  },
  data() {
    return {
      formData: new FormData(),
      ruleForm: {
        after_regist_change: "",
        applicant: "asd",
        is_share: 1,
        class_id: 3,
        before_regist_change: "",
        regist_num: "",
        regist_validity: "",
        transferees_name: "",
        transferor_name: "",
        file: [],
        files: [],
        type: ""
      },
      rules: {
        after_regist_change: [
          { required: true, message: "字段不能为空", trigger: "blur" }
        ],
        applicant: [
          { required: true, message: "字段不能为空", trigger: "blur" }
        ],
        is_share: [
          { required: true, message: "字段不能为空", trigger: "change" }
        ],
        before_regist_change: [
          { required: true, message: "字段不能为空", trigger: "blur" }
        ],
        regist_num: [
          { required: true, message: "字段不能为空", trigger: "blur" }
        ],
        regist_validity: [
          { required: true, message: "字段不能为空", trigger: "blur" }
        ],
        transferees_name: [
          { required: true, message: "字段不能为空", trigger: "blur" }
        ],
        transferor_name: [
          { required: true, message: "字段不能为空", trigger: "blur" }
        ]
      }
    };
  },

  methods: {
    // 获取数据
    getFile(data, data2) {
      this.ruleForm.files = data;
      this.ruleForm.file = data2;
    },
    subForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.ruleForm.file.forEach(element => {
            this.formData.append("file", element);
          });
          this.ruleForm.files.forEach(element => {
            this.formData.append("files", element);
          });

          this.formData.append(
            "after_regist_change",
            this.ruleForm.after_regist_change
          );
          this.formData.append("applicant", this.ruleForm.applicant);
          this.formData.append("is_share", this.ruleForm.is_share);
          this.formData.append("class_id", this.ruleForm.class_id);
          this.formData.append(
            "before_regist_change",
            this.ruleForm.before_regist_change
          );
          this.formData.append("regist_num", this.ruleForm.regist_num);

          this.formData.append(
            "regist_validity",
            this.ruleForm.regist_validity
          );
          this.formData.append(
            "transferees_name",
            this.ruleForm.transferees_name
          );
          this.formData.append(
            "transferor_name",
            this.ruleForm.transferor_name
          );

          // axios向后端发送数据
          this.$http
            .post(
              "/proafo/addInfo",
              this.formData
            )
            .then(function(response) {
              console.log(response);
            })
            .catch(function(error) {
              console.log(error);
            });
        } else {
          alert("提交失败");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped lang="less">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
  opacity: 0;
}
i,
em {
  font-style: normal;
}
.register {
  width: 100%;
  background-color: #e7e8eb;
  .regbox {
    width: 1240px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    .reg-title {
      padding: 15px 20px;
      text-align: center;
      border-bottom: 1px solid #e7e8eb;
      h2 {
        font-size: 22px;
        font-weight: 300;
      }
    }
    .reg-form {
      width: 700px;
      margin-left: 120px;
      .el-form-item {
        margin-top: 50px;
      }
    }
    /deep/.el-textarea__inner {
      height: 120px;
    }

    .r-f-sutbox {
      margin-top: 50px;
      text-align: center;
      .r-f-sut {
        padding: 12px 20px;
        color: #fff;
        border: none;
        outline: none;
        border-radius: 5px;
        cursor: pointer;
        background-color: #67c23a;
      }
    }
    /deep/.input-sub {
      margin-top: 0px !important;
      margin-bottom: 40px;
      label {
        text-align: left;
      }
    }
  }
}
</style>
